<template>
	<view class="header">
		<!-- 导航栏 -->
		<u-navbar title="筛选">
			<view class="u-slot-wrap  flex flex-jc-fe" style="flex: 1;padding: 0 24rpx;">
				<view class="u-slot-right" @click="reSet">
					重置
				</view>
			</view>
		</u-navbar>
		<view class="screen">
			<view class="main">
				<view class="title">
					
					<!-- 价格 -->
					<view class="flex price" style="margin-left: 20rpx;">
						<view style="width: 10rpx;height: 36rpx;background: linear-gradient(0deg, #FBB000, #FFE23E);border-radius: 5rpx;"></view>
						<view style="width: 25%;margin-left: 20rpx;">价格</view>
						<view class="flex flex-jc-fe" style="width: 65%;padding-bottom: 50rpx;">
							<view class="title-price">价格区间：</view>
							<view class="title-section">{{ rangeValues3[0] }}-{{ rangeValues3[1]===70?'不限':rangeValues3[1] }}<text v-show="rangeValues3[1]!==70">万</text></view>
						</view>
					</view>
					
					<!-- 刻度 区间 -->
					<view>
						<view class="flex flex-jc-c">
							<view style="display: flex;justify-content: space-between;width: 636rpx;">
								<view v-for="(item,index) in priceSection" :key='index'>
									<view>{{item.preice}}</view>
									<view class="flex flex-jc-c">
										<view style="border-left: 2rpx solid #DDDDDD;width: 2rpx;height: 12rpx;"></view>
									</view>
								</view>
							</view>
						</view>

						<view>
							<view class="flex flex-jc-c" @touchend='taps'>
								<RangeSlider :width="slideWidth" :height="slideHeight" :blockSize="slideBlockSize" :min="slideMin" :max="slideMax"
								 :values="rangeValues3" :step="step" :liveMode="isLiveMode" @rangechange="onRangeChange3" :barHeight='barHeight'>
									<view slot="minBlock" class="range-slider-block"></view>
									<!-- 左边滑块的内容 -->
									<view slot="maxBlock" class="range-slider-block"></view>
									<!-- 右边滑块的内容 -->
								</RangeSlider>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 购车类型图 -->
				<view class="title" style="margin-left: 20rpx;">
					<view class="flex">
						<view style="width: 10rpx;height: 36rpx;background: linear-gradient(0deg, #FBB000, #FFE23E);border-radius: 5rpx;"></view>
						<view style="margin-left: 20rpx;">购车类型</view>
					</view>
				
					<view class="flex flex-jc-sa flex-wrap-w">
						<view v-for="(item,index) in carType" :key='item.id' @click="changeType(item.id,item)" class="cell-list flex flex-jc-c flex-ai-c" :class="[{'type-active': carTypeId === item.id}]">
							<view>
								<view class="img"><image :src="item.icon"></image></view>
								<view style="margin-top: 10rpx;">{{item.type}}</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 购车类型 -->
				<view class="title" style="margin-left: 20rpx;">
					<view class="flex">
						<view style="width: 10rpx;height: 36rpx;background: linear-gradient(0deg, #FBB000, #FFE23E);border-radius: 5rpx;"></view>
						<view style="margin-left: 20rpx;">购车类型</view>
					</view>

					<view class="flex flex-jc-sa">
						<view v-for="(item,index) in buyType" :key='item.id' @click="onBuyType(item.id,item)" :class="[{'type-active': buyTypeId === item.id},{'type':true}]">
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" style="margin-top: 40rpx;">
			<view style="font-size: 28rpx; text-align: center;">已选条件共<text style="color: #FBB000;">{{carLength}}</text>辆</view>
			<button style="background: linear-gradient(0deg, #FBD220, #FFE23E);
			 color: #3D3D3D;
			border-radius: 44px;"
			 @click="btnLook">
				查看</button>
		</view>
	</view>
</template>

<script>
	import RangeSlider from '../../../pages/index/components/slider.vue'
	export default {
		components: {
			RangeSlider
		},
		data() {
			return {
				type:'',//传过来的
				onBuyTypeId:0,
				carTypeName:'',
				//购车类型
				carType:[
					{
						icon:'https://files.yzsheng.com/client/me/img/car1.png',
						id:1,
						type:'两厢轿车'
					},
					{
						icon:'https://files.yzsheng.com/client/me/img/car2.png',
						id:2,
						type:'三厢轿车'
					},
					{
						icon:'https://files.yzsheng.com/client/me/img/car3.png',
						id:3,
						type:'SUV'
					},
					{
						icon:'https://files.yzsheng.com/client/me/img/car4.png',
						id:4,
						type:'MPV'
					},
					{
						icon:'https://files.yzsheng.com/client/me/img/car4_1.png',
						id:5,
						type:'微面'
					},
					{
						icon:'https://files.yzsheng.com/client/me/img/car6.png',
						id:6,
						type:'皮卡'
					}
				],
				slideWidth: 636,//区间宽度
				slideHeight: 80,//区间高度
				barHeight: 20,//滑块高度
				slideBlockSize: 44,//滑块size
				slideMin: 0,//滑块最大值
				slideMax: 70,//滑块最小值
				isLiveMode: true,
				step: 10,//步长
				rangeValues3: [0, 70],//区间值
				//价格区间
				priceSection: [{
						id: 0,
						preice: 0,
					},
					{
						id: 2,
						preice: 10,
					},
					{
						id: 3,
						preice: 20,
					},
					{
						id: 4,
						preice: 30,
					},
					{
						id: 5,
						preice: 40,
					},
					{
						id: 6,
						preice: 50,
					},
					{
						id: 7,
						preice: 60,
					},
					{
						id: 8,
						preice: '不限',
					},
				],
				buyTypeId: 0,//购车类型id（无图）
				buyType: [{
						id: 1,
						name: '一成首付'
					},
					{
						id: 2,
						name: '以租代售'
					},
					{
						id: 3,
						name: '巨能降'
					}
				],
				carTypeId:0,//购车类型（图）
				newMaxValue:0,
				carLength:0,
				brandId:'',//品牌id
			}
		},
		watch: {
			rangeValues3(val){
				if(val[1]===70){
					this.newMaxValue = 0
				}else{
					this.newMaxValue = val[1]
				}
			}
		},
		onLoad(op){
			if(!op.type) return false
			this.type = op.type
			this.brandId = op.id
		},
		created() {
			if(this.type==='110'){
				this.getHome()
			}else {
				this.buyList()
			}
			
		},
		methods: {
			//手指放下
			taps(e){
				console.log(e)
				if(this.type==='110'){
					this.getHome()
				}else {
					this.buyList()
				}
			},
			//首页
			async buyList() {
			  try {
			    let data = {
			      'pageIndex': 1,
			      'pageSize':100,
			      'sorting': 0, // 0：智能，1：销量最高，2：距离最近，3：关注最高，4：7迈自营，1成首付 ，1成首付： 0：智能，1：首付最低，2：月供最低
			      'brandId': '', //品牌id
			      'lowprice': Number(this.rangeValues3[0])*10000, //价格区间低 ,价格幅度筛选的最低价
			      'highprice': Number(this.newMaxValue)*10000, //	价格区间高，价格幅度筛选的最低价
			      'cartype': this.buyTypeId, //购车类型0没有1:一层首付2：以租代售3：巨能降
			      'type': 0, //新车推荐0，1低首付，2以租代售,3 一口价
			      'lowPricetyoe': null, //一成首付最低价：默认传null
			      'highPricetyoe': null, //一成首付最高价：默认传null
			      'lowMonthlyPayments': null, //月供最低价：默认传null
			      'highMonthlyPayments': null, //月供最低价：默认传null
			      'carBodyModel': this.carTypeId
			    }
			    const res = await this.$api.buyCar.buyHome(data)
					this.carLength = res.data.total
					// console.log(this.carLength,'11')
			  } catch (e) {
			    console.log(e)
			  }
			},
			
			//品牌直供
			async getHome(){
			  try{
			    let data = {
						  'pageIndex': 1,
						  'pageSize': 100,
						  'brandId': this.brandId,
						  'lowprice': Number(this.rangeValues3[0])*10000,
						  'highprice': Number(this.newMaxValue)*10000,
						  'cartype': this.buyTypeId,
						  'carBodyModel': this.carTypeId
			    }
			    const res = await this.$api.buyCar.getBrandSupplyNextLevelList(data)
					this.carLength = res.data.list.length
			  }catch(e){
			    //TODO handle the exception
			  }
			},
			//重置
			reSet(){
				this.carTypeId = 0
				this.buyTypeId = 0
				this.rangeValues3 = [0, 70]
				if(this.type==='110'){
					this.getHome()
				}else {
					this.buyList()
				}
			},
			//筛选购车类型
			onBuyType(id,item) {
				console.log(item.name,'type')
				// this.onBuyTypeId = item.name
			  if (id !== this.buyTypeId) {
				  this.buyTypeId = id
					this.onBuyTypeId = item.name
			  } else {
				  this.buyTypeId = 0
					this.onBuyTypeId = ''
			  }
			  if(this.type==='110'){
			  	this.getHome()
			  }else {
			  	this.buyList()
			  }
			},
			changeType(id,item){
				console.log(item.type)
				// this.carTypeName = item.type
				if (id !== this.carTypeId) {
				  this.carTypeId = id
					this.carTypeName = item.type
				} else {
				  this.carTypeId = 0
					this.carTypeName = ''
				}
				if(this.type==='110'){
					this.getHome()
				}else {
					this.buyList()
				}
			},
			//筛选查看
			btnLook() {
				let type = {
						rangeValues:this.rangeValues3,
						buyTypeId:this.buyTypeId,
						carTypeId:this.carTypeId
				}
				let name = {
					onBuyTypeId:this.onBuyTypeId,
					carTypeName:this.carTypeName,
					rangeValues:this.rangeValues3,
				}
				if(this.type==='110'){
					uni.$emit('rangeValues1',type)
					uni.$emit('type2',name)
				}else {
					uni.$emit('rangeValues3',type)
					uni.$emit('type',name)
				}
				
				// uni.$emit('carTypeId',this.carTypeId)
				uni.navigateBack({
					delta: 1
				})
			},
			onRangeChange3: function(e) {
				this.rangeValues3 = [Number(e.minValue), Number(e.maxValue)]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		background-color: #EEEEEE;
		height: 100vh;
		
		.screen{
			height: 1021rpx;
			background-color: #fff;
			
			.price{
				
			}
			.main{
				padding:50rpx 24rpx;
			}
			
			.title{
				
				&-price{
					font-size: 28rpx;
					font-weight: 500;
					color: #666666;
				}
				
				&-section{
					color: #333333;
					font-weight: bold;
				}
			}
			.cell-list{
				width: 190rpx;
				height: 140rpx;
				background: #EEEEEE;
				border-radius: 5rpx;
				margin: 30rpx 0rpx 30rpx 0rpx;
				text-align: center;
				color: #333333;
				font-size: 26rpx;
				.img{
					width: 131rpx;
					height: 47rpx;
					
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
	//type激活颜色
	.type-active {
		width: 180rpx;
		height: 60rpx;
		background: #FFE23E !important;
		border-radius: 10rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.type {
		background: #EEEEEE;
		width: 180rpx;
		height: 60rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 60rpx;
		margin-top: 30rpx;
	}
</style>
